<template>
  <div class="empl">
    <!-- ======================================== 搜索 ======================================== -->
    <div class="search-box">
      <router-link :to="{name:'search'}" class="search">
        <!--<i class="weui-icon-search"></i>-->
        <img src="../../../static/images/home/search.png" alt="">
        <div>
          搜索拍品/专场/店铺/朝代
        </div>
      </router-link>

      <router-link :to="{name:'help'}" class="help">
        <!--<i class="icon icon-help"></i>-->
        <img src="../../../static/images/home/help.png" alt="">
      </router-link>
    </div>
    <!-- ======================================== 图片轮播 ======================================== -->
    <div style="height: 9rem">
      <mt-swipe :auto="2000">
        <mt-swipe-item  v-for="(item,index) in lunboList" :key="index">
          <a :href="item.linkUrl" :target="item.target">
            <img :src="resUrl + item.mediaUrl" alt="" style="width: 100%">
          </a>
        </mt-swipe-item>
      </mt-swipe>
    </div>
    <div class="splitBlock"></div>
    <!-- ======================================== 广告位 ======================================== -->
    <div class="advertisement">
      <div class="ad-one" style="border-top:none;">
        <div>
          <div v-for="(ad,index) in adList" :key="index" v-if="index==0">
            <!--<a :href="baseUrl+ad.linkUrl" :target="ad.target">-->
              <!--<img :src="resUrl+ad.mediaUrl" alt="">-->
            <!--</a>-->
            <router-link :to="{name:'collection'}">
              <img :src="resUrl+ad.mediaUrl" alt="">
            </router-link>
          </div>
        </div>
        <div>
          <div v-for="(ad,index) in adList" :key="index" v-if="index>=2&&index<=3">
            <!--<a :href="baseUrl+ad.linkUrl" :target="ad.target">-->
              <!--<img :src="resUrl+ad.mediaUrl" alt="">-->
            <!--</a>-->
            <router-link :to="{name:index==2?'liveAuction':'wait'}">
              <img :src="resUrl+ad.mediaUrl" alt="">
            </router-link>
          </div>
        </div>
      </div>
      <div class="ad-two">
        <div v-for="(ad,index) in adList" :key="index" v-if="index==1">
          <!--<a :href="baseUrl+ad.linkUrl" :target="ad.target">-->
            <!--<img :src="resUrl+ad.mediaUrl" alt="">-->
          <!--</a>-->
          <router-link :to="{name:'wait'}">
            <img :src="resUrl+ad.mediaUrl" alt="">
          </router-link>
        </div>
        <div v-for="(ad,index) in adList" :key="index" v-if="index==4">
          <!--<a :href="baseUrl+ad.linkUrl" :target="ad.target">-->
            <!--<img :src="resUrl+ad.mediaUrl" alt="">-->
          <!--</a>-->
          <router-link :to="{name:'wait'}">
            <img :src="resUrl+ad.mediaUrl" alt="">
          </router-link>
        </div>
      </div>
    </div>
    <div class="splitBlock"></div>
    <!-- ======================================== 明星店铺 ======================================== -->
    <block-title title="明星店铺"></block-title>
    <mt-swipe :auto="3000" :showIndicators="false" style="height: 8.9rem;background: #fff;">
      <mt-swipe-item  v-for="(shop,index) in starShopList" :key="index">
        <div class="star-shop">
          <router-link :to="{name:'shopDetail',query:{shopId:shop.shopId}}">
            <div class="star-bg">
              <div class="star-left">
                <img :src="shop.smImageUrl.substr(0,4).toLowerCase() == 'http' ? shop.smImageUrl : resUrl+shop.smImageUrl" alt="">
                <div class="star-title">
                  <h3><span>{{shop.name}}</span><span class="star-shop-level">LV{{shop.creditRating}}</span></h3>
                  <p>{{shop.signature}}</p>
                </div>
              </div>
            </div>
          </router-link>
          <!--<span class="star-gz">关注</span>-->
          <div class="star-pro">
            <p>{{shop.productNum}}件拍品 / {{shop.followersNum}}人关注</p>
            <ul>
              <li v-for="pro in shop.products" :key="pro.id" :style="'backgroundImage: url('+(pro.mxImageUrl.substr(0,4).toLowerCase() == 'http' ? pro.mxImageUrl : resUrl+pro.mxImageUrl)+')'">
                <router-link :to="{name:'lotDetail',query:{lotId:pro.id,shopId:pro.shopId}}" style="display: block;height: 100%"></router-link>
              </li>
            </ul>
          </div>
        </div>
      </mt-swipe-item>
    </mt-swipe>

    <div class="look-more">
      <router-link :to="{name:'product.productShop'}">更多店铺></router-link>
    </div>
    <div class="splitBlock"></div>
    <!-- ======================================== 热门专场 ======================================== -->
    <block-title title="热门专场"></block-title>

    <special-list :specialList="specialList" :release="SpecialRelease"></special-list>

    <div class="look-more">
      <router-link :to="{name:'product.productSpecial'}">更多专场&gt;</router-link>
    </div>
    <div class="splitBlock"></div>
    <!-- ======================================== 精品推荐 ======================================== -->
    <block-title title="精品推荐"></block-title>

    <nav class="quality-nav">
      <ul>
        <li v-for="(nav,index) in qualityNav" :key="index" :class="{activeNav:navIndex==index}" @click="toggle(index,nav.id)">
          <span v-model="text">{{nav.children ? text : nav.name}}</span>
          <ul v-if="nav.children" v-show="isShow">
            <li v-for="(item,i) in nav.children" :key="i" :class="{active:itemIndex==i}" @click.stop="toggleShow(i,item.name,item.id)"><span>{{item.name}}</span></li>
          </ul>
        </li>
      </ul>
    </nav>

    <product-list :productList="productList" :release="proRelease" :fixedPrice="proTypeByfixedPrice" :deal="deal"></product-list>

    <div class="look-more look-more-pro">
      <router-link :to="{name:'product.productLots'}">更多拍品></router-link>
    </div>

    <!--&lt;!&ndash;等级介绍&ndash;&gt;  -->
    <div class="weui-skin_android" id="weui-android-actionsheet" v-show="isZhiDao">
      <div class="weui-mask"></div>
      <div class="weui-actionsheet">
        <img src="../../../static/images/me/dengjijieshao.png" alt="" style="width: 100%">
        <div class="weui-actionsheet__menu">
          <div class="level">
            <mt-swipe :auto="0" @change="handleChange">
              <mt-swipe-item  v-for="(v,k) in levelList" :key="k">
                <h3>
                  {{country+'  '+v.name}}
                </h3>
                <p>{{v.text}}</p>
              </mt-swipe-item>
            </mt-swipe>
          </div>
          <div class="zhidao-box">
            <span class="zhidao" @click="zhiDaoClick">我知道了</span>
          </div>
          <div class="dqdj" v-show="showlevel">
            <img src="../../../static/images/me/dangqianengji.png" alt="">
          </div>
        </div>
      </div>
    </div>

    <footer-vue></footer-vue>
  </div>
</template>
<script>
  import {setlocalStore,getUser,getStatusByKeyVal,setStore} from '../../assets/js/tools';
  import {ipconfig} from '../../assets/js/ipconfig';
  import {getStatusInfo,getResAndMedia,getShopFamousList,getProductList,getWeChatUrl,getSpecialList} from '../../assets/js/getData';
  export default {
    data(){
      return {
        resUrl:ipconfig.resUrl,//图片、视频、音频等资源访问路径
        wxWebAuthUrl:ipconfig.wxWebAuthUrl,
        baseUrl:ipconfig.baseUrl,
        lunboList:[],//轮播图数据
        adList:[],//广告位数据
        starShopList:[],//明星店铺
        specialList:[],//热门专场列表
        SpecialRelease:null,//专场状态已发布10
        bySynthesisDesc:null,//综合排序降序
        //精品推荐导航栏
        qualityNav:[],
        //精品推荐产品列表
        productList:[],
        proRelease:null,//拍品状态已发布10
        deal:null,//拍品状态已成交
        proTypeByfixedPrice:null,//拍品类型一口价拍品1
        proStatusByInAuction:null,//拍品状态竞拍中

        navIndex:0,
        text:"一口价商品",
        itemIndex:0,
        isShow:false,
        isZhiDao:false,
        showlevel:true,

        //等级
        levelList:[
          {name:'平民',text:'秦汉前对身份比奴隶高的农民和小商人的称谓，秦汉后泛指一般平民。'},
          {name:'男爵',text:'男是中国古代爵位名，男爵是中国古代封建制度五等爵中的一个等级。按出土的甲骨文，至少商朝时已经有了“男”这一爵位。'},
          {name:'子爵',text:'子是中国古代爵位名，自中国先秦时代开始，已有君主赐封子爵，是中国古代封建制度五等爵的第四等。'},
          {name:'伯爵',text:'伯是中国古代爵位名，伯为长子，立长不立幼的传承规范。中国自先秦时代开始，已有君主赐封伯爵的制度，伯爵是中国古代封建制度五等爵的第三等。'},
          {name:'侯爵',text:'侯是中国古代爵位名，侯爵为“超品”，即为超过一品之意。只授与皇亲国戚与极少数功臣。自中国先秦时代开始，已有君主赐封侯爵，是周朝封建五等爵的第二等。'},
          {name:'公爵',text:'公是中国古代爵位名，自中国先秦时代开始，已有君主赐封公爵，是周朝封建五等爵的第一等。'},
          {name:'王',text:'古代一国君主的称号，现代有些国家仍用这种称号。中国古代皇帝以下的最高爵位：王公，王侯。'}
        ],

        country:null,

      }
    },
    created(){
      //获取枚举类型键值对
      getStatusInfo().then(res => {
        if(res.data.reqResult.code>0){
          let data = res.data.data;
          setlocalStore('commonStatus',data);
          this.proTypeByfixedPrice = data.eProductType.statusMap.fixedPrice.val;//拍品类型一口价拍品
          let proTypeByAuction = data.eProductType.statusMap.auction.val;//拍品类型竞价拍品
          let proByReleaseDesc = data.eOrderByType.statusMap.byReleaseDesc.val;//排序最新拍品
          let proByEndTimeAsc = data.eOrderByType.statusMap.byEndTimeAsc.val;//排序即将结拍
          let bySynthesisDesc =  data.eOrderByType.statusMap.bySynthesisDesc.val;//综合排序降序
          let proStatusByInPreview = data.eProductStatus.statusMap.inPreview.val;//拍品状态预展中
          this.proStatusByInAuction = data.eProductStatus.statusMap.inAuction.val;//拍品状态竞拍中
          this.proRelease = data.eProductStatus.statusMap.release.val;//拍品状态已发布
          this.deal = data.eProductStatus.statusMap.deal.val;//拍品状态已成交
          this.SpecialRelease =  data.eSpecialStatus.statusMap.release.val;//专场状态已发布

          this.qualityNav=[
            {id:this.proTypeByfixedPrice,name:'一口价拍品',children:[{id:this.proTypeByfixedPrice,name:'一口价拍品'},{id:proTypeByAuction,name:'竞拍拍品'}]},
            {id:proByReleaseDesc,name:'最新拍品'},
            {id:proByEndTimeAsc,name:'即将结拍'},
            {id:proStatusByInPreview,name:'预展中'}
          ];

          //精品推荐拍品列表
          this.getProductList({
            pageNum: 1,
            pageSize: 10,
            type: this.proTypeByfixedPrice
          });

          // 获取热门专场
          getSpecialList({
            pageNum:1,
            pageSize:3,
            descType:bySynthesisDesc,
          }).then(res => {
            if(res.data.reqResult.code>0){
              this.specialList = res.data.data;
            }else {
              Toast(res.data.reqResult.msg);
            }
          });
        }else {
          Toast(res.data.reqResult.msg);
        }
      });

      let user = getUser();
      if(user&&this.$route.query.countryId){
        this.isZhiDao = !this.isZhiDao;
        this.country = getStatusByKeyVal('eAffiliationCountry',user.affiliationCountry).name;
      }

      //获取首页轮播图
      getResAndMedia('homePageBanner').then(res => {
        if(res.data.reqResult.code>0){
          let data = res.data.data;
          this.lunboList = data[0].resMediaList;
        }else {
          Toast(res.data.reqResult.msg);
        }
      });

      //获取首页广告位
      getResAndMedia('homePageAdvertising').then(res => {
        if(res.data.reqResult.code>0){
          let data = res.data.data;
          let adList = data[0].resMediaList;
          function sortCode(a,b) {
            let n = a.name.slice(4);
            let m = b.name.slice(4);
            return n-m;
          }
          adList.sort(sortCode);
          this.adList = adList;
        }else {
          Toast(res.data.reqResult.msg);
        }
      });

      // 获取明星店铺
      getShopFamousList(1,3,3).then(res => {
        if(res.data.reqResult.code>0){
          this.starShopList = res.data.data;
        }else {
          Toast(res.data.reqResult.msg);
        }
      });

      getWeChatUrl("-URL-").then(res => {
        if(res.data.reqResult.code>0){
          let weUrl = res.data.data;
          setStore('weUrl',weUrl);
        }else {
          // Toast(res.data.reqResult.msg);
        }
      });
    },
    methods:{
      //精品推荐拍品列表
      async getProductList(data){
        let res = await getProductList(data);
        if(res.data.reqResult.code>0){
          this.productList = res.data.data;
        }else {
          Toast(res.data.reqResult.msg);
        }
      },
      //切换拍品类型
      toggleShow(i,name,id){
        this.isShow = false;
        this.itemIndex = i;
        this.text = name;
        let data = {
          pageNum: 1,
          pageSize: 10,
          type: id,
        };
        this.getProductList(data);
      },
      //切换精品推荐导航
      toggle(index,id){
        this.navIndex = index;
        if(index==0){
          this.isShow = !this.isShow;
          return;
        }else {
          this.isShow = false;
          if(index==1){
            let data = {
              pageNum: 1,
              pageSize: 10,
              descType: id,
            };
            this.getProductList(data);
          }else if(index==2){
            let data = {
              pageNum: 1,
              pageSize: 10,
              descType: id,
              status:this.proStatusByInAuction,//拍品状态已发布10,
            };
            this.getProductList(data);
          }else if(index==3){
            let data = {
              pageNum: 1,
              pageSize: 10,
              status: id,
            };
            this.getProductList(data);
          }
        }
      },
      zhiDaoClick(){
        this.isZhiDao = !this.isZhiDao;
      },
      //等级介绍切换
      handleChange(index) {
        if(index==0){
          this.showlevel = true;
        }else {
          this.showlevel = false;
        }
      }
    },

  }
</script>
<style scoped>
  /*搜索*/
  .empl{
    background: #f2f2f2;
  }
  .search-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.35rem 0.75rem 0.55rem 0.7rem;
    background-color: #f2f2f2;
  }
  .search{
    display: flex;
    flex-grow: 1;
    align-items: center;
    height: 1.3rem;
    border: 1px solid #E6E6E6;
    border-radius: 2px;
    padding: 0 0.4rem;
  }
  .search div{
    color: #7F7F7F;
    font-size: 0.6rem;
  }
  .search img{
    margin-right: 0.5rem;
    width: 0.65rem;
  }
  .help{
    margin-left: 0.5rem;
    width: 1rem;
  }
  .help img{
    width: 100%;
  }
  /*查看更多*/
  .look-more{
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    background-color: #ffffff;
  }
  .look-more-pro{
    background-color: #F2F2F2;
  }
  .look-more a{
    color: #656565;
    font-size: 0.6rem;
  }
  /*广告位*/
  .advertisement{
    background-color: #ffffff;
  }
  .ad-one,.ad-two{
    display: flex;
    border-top: 1px #eeeeee solid;
    box-sizing: border-box;
  }
  .ad-one>div,.ad-two>div{
    width: 50%;
  }
  .ad-one>div:first-child,.ad-two>div:first-child{
    border-right: 1px #eeeeee solid;
    box-sizing: border-box;
  }
  .ad-one>div:last-child>div:last-child{
    border-top: 1px #eeeeee solid;
    box-sizing: border-box;
  }
  .advertisement a{
    display: block;
    width: 100%;
  }
  .advertisement img{
    display: block;
    width: 100%;
  }
  /*明星店铺*/
  .star-shop{
    margin: 0 0.5rem;
    box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.3);
    border-radius: 2px;
  }
  .star-bg{
    background-image: url("../../../static/images/famousBg.png");
    background-repeat: no-repeat;
    background-size: cover;
    height: 2.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.5rem;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
  }
  .star-left{
    display: flex;
    align-items: center;
  }
  .star-left img{
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 50%;
    margin-right: 0.35rem;
  }
  .star-title h3{
    color: #fff;
    font-weight: 600;
    font-size: 0.75rem;
    line-height: 0.75rem;
  }
  .star-title h3 span{
    display: inline-block;
  }
  .star-title p{
    color: #999;
    font-size: 0.6rem;
    line-height: 0.6rem;
    margin-top: 0.2rem;
  }
  .star-shop-level{
    background-color: #FFBE33;
    border-radius: 4px;
    color: #A50404;
    font-size: 0.4rem;
    line-height: 0.4rem;
    padding: 0.05rem 0.35rem;
    margin-left: 0.4rem;vertical-align: bottom;
  }
  .star-gz{
    height: 0.65rem;
    line-height: 0.65rem;
    color: #C50000;
    border: 1px solid #C50000;
    padding: 0 0.35rem;
    text-align: center;
    border-radius: 5px;
    font-size: 0.6rem;
    position: absolute;
    right: 1rem;
    top: 0.7rem;
  }
  .star-pro{
    padding: 0rem 0.5rem 0.55rem 0.5rem;
  }
  .star-pro p{
    color: #282828;
    font-size: 0.6rem;
    padding: 0.5rem 0 0.4rem 0;
    font-weight: bold;
  }
  .star-pro ul{
    display: flex;
    justify-content: space-between;
  }
  .star-pro li{
    width: 31.4%;
    height: 3.9rem;
    background-origin: content-box;
    background-position:50% 50%;
    background-size:contain;
    background-repeat:no-repeat;
    background-color: rgba(0,0,0,0.2);
  }
  /*精品推荐导航栏*/
  .quality-nav{
    padding-bottom: 0.75rem;
    background-color: #fff;
  }
  .quality-nav>ul{
    display: flex;
    justify-content: space-between;
  }
  .quality-nav>ul>li{
    flex-grow: 1;
    text-align: center;
  }
  .quality-nav>ul>li>span{
    font-size: 0.75rem;
    color: #989898;
    padding-bottom: 0.35rem;
    display: inline-block;
  }
  .quality-nav>ul>li:first-child{
    position: relative;
  }
  .quality-nav>ul>li:first-child>span{
    background-image: url("../../../static/images/prdMoreType.png");
    background-repeat: no-repeat;
    background-position: right;
    background-size: 10px 10px;
    padding-right: 10px;
  }
  .quality-nav>ul>li:first-child.activeNav>span{
    background-image: url("../../../static/images/prdMoreTypeActive.png");
  }
  .quality-nav>ul>li.activeNav>span{
    color: #c40002 !important;
    border-bottom: 1px #c40002 solid;
  }
  .quality-nav>ul>li:first-child ul{
    position: absolute;
    left: 0;
    top: 32px;
    width: 100%;
    background-color: #fff;
    z-index: 1;
  }
  .quality-nav>ul>li:first-child ul li{
    line-height: 1.5rem;
  }
  .active>span{
    color: #c40002 !important;
  }
  /*等级介绍*/
  .weui-skin_android .weui-actionsheet{
    width: 76.3%;
    /*height: 25rem;*/
    /*background: url("../../../static/images/me/dengjijieshao.png") no-repeat center;*/
    /*background-size: contain;*/
  }
  .weui-actionsheet__menu{
    width: 54.7vw;
    position: absolute;
    left: 50%;
    top: 16.7%;
    transform: translateX(-50%);
    background-color: transparent;
    box-shadow: none;
  }
  .weui-actionsheet__menu h3{
    text-align: center;
    margin-bottom: 1rem;
    margin-top: 1.5rem;
    color: #C50000;
  }
  .weui-actionsheet__menu img{
    width: 2.05rem;
  }
  .weui-actionsheet__menu p{
    color: #282828;
    font-size: 0.75rem;
    line-height: 1.3rem;
    text-indent: 1.5rem;
  }
  .weui-actionsheet__menu .zhidao-box{
    text-align: center;
    margin-top: 0.5rem;
  }
  .weui-actionsheet__menu .zhidao{
    display: inline-block;
    width: 6.75rem;
    height: 1.15rem;
    line-height: 1.15rem;
    background: url("../../../static/images/me/zhidao.png") no-repeat;
    background-size: cover;
    text-align: center;
    color: #ffffff;
    font-size: 0.65rem;
  }
  .dqdj{
    position: absolute;
    right: -2rem;
    top: -0.8rem;
    width: 3rem;
  }
  .dqdj img{
    width: 100%;
  }
</style>
